<template>
	<div v-loading="loading">
		<div class="content-top">
			<span class="h1">系统管理</span>
			<span class="h2">系统选项</span>
		</div>
		<div class="log-type">
			<div class="title clearfix" style="margin-bottom: 20px;">
				<div class="fl" style="width:50%;">
					<span class="titles">系统选项</span>
				</div>
				<div class="fr">
					<el-input v-model="input" placeholder="请输入内容" style="width:217px;"></el-input>
					<el-button type="primary">查询</el-button>
				</div>
			</div>
		</div>
		<div class="con">
			<div style="margin-top: 10px; padding-bottom: 100px;overflow: auto">
				<el-table ref="singleTable" border :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
					<el-table-column type="index" width="50" align='center'>
					</el-table-column>
					<el-table-column property="OName" label="选项名称" align='center' >
					</el-table-column>
					<el-table-column property="ODescript" label="选项描述" align='center'>
					</el-table-column>
					<el-table-column property="OValue" label="选项值" align='center'>
					</el-table-column>
					<el-table-column property="Memo" label="备注" align='center'>
					</el-table-column>
					<el-table-column property="address" label="操作" width="240" align='center'>
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click='modiy(scope.$index,scope.row.OValue,scope.row.OName,scope.row.ODescript)'>修改</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="pages">
					<el-pagination background layout="prev, pager, next" :total="1">
					</el-pagination>
				</div>
			</div>
		</div>
		<div class="edit" v-if="dialogVisible">
			<el-dialog title="系统选项" :visible.sync="dialogVisible">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="系统选项:">
						<el-input v-model="form.OName" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="选项描述:">
						<el-input v-model="form.ODescript" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="选项值:">
						<el-input v-model="form.OValue"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="setoption()">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
export default {
	name: 'system',
	data() {
		return {
			input:'',
			pageindex:1,
			loading:false,
			form: {//弹框值
				OName: '',
				ODescript: '',
				OValue: ''
			},
			showEdit: false,//显示编辑
			tableData: [{
					OName:'test',
					ODescript:'test1',
					OValue:'1111',
					Memo:'222'
			},
			{
					OName:'test',
					ODescript:'test1',
					OValue:'1111',
					Memo:'222'
				}
			],//数据
			currentRow: null,
			dialogVisible: false,
			total:1,//页码
			id:'',//全局id
		}
	},
	created(){

	},
	methods: {
		handleCurrentChange(val) {
			this.currentRow = val;
		},
		//修改弹框
		modiy(index,OValue,OName,ODescript){
			this.form.OName = OName
			this.form.ODescript = ODescript
			this.id=index;
			this.form.OValue = OValue
			this.dialogVisible=true
		},
		//获取系统选项
		getoptions(){
			
		},
		//设置选项值
		setoption(){
			this.tableData[this.id].OName = this.form.OName
			this.tableData[this.id].ODescript = this.form.ODescript
			this.tableData[this.id].OValue = this.form.OValue
			this.dialogVisible = false
		}
	}
}
</script>

<style>
.title1 {
	width: 100%;
	padding: 15px 0;
	text-indent: 20px;
	background: #fff;
	border-bottom: 1px solid #dddee1;
}

.title1 span {
	margin-right: 10px;
}

.title1 .h1 {
	font-size: 16px;
	font-weight: 600;
}

.title1 .h2 {
	font-size: 14px;
}

.con {
	width: 100%;
	margin-top: 10px;
}

.page {
	float: right;
	margin-top: 20px;
}
</style>